<template>
  <div ref="customTimeline" class="custom-timeline w-100">
    <div v-for="(item, index) in listData" :key="index" class="custom-timeline-item">
      <div ref="leftWarp" class="leftWarp">
        <p class="big">
          {{ item.operateName === '下发提醒' ? '工作提醒' : item.operateName }}
        </p>
        <p class="small">{{ item.operateType }}</p>
        <!-- <p class="small">{{ item.title }}</p> -->
      </div>
      <div class="line-dot" />
      <div class="rightWarp">
        <el-collapse v-model="item.activeNames">
          <el-collapse-item :title="item.operateTime" name="1">
            <div v-for="its, indexs in item.list" :key="indexs" class="right-item">
              <span>{{ its.label }}</span>
              <div class="right-item-cont">
                <!-- 文字展示 -->
                <template v-if="its.type === 'text'">{{ its.value }}</template>
                <!-- 图片展示（可能有附件形式） -->
                <template v-if="its.type === 'image'&&Array.isArray(its.value)&&its.value.length>0">
                  <div v-for="imgItem, imgIndex in its.value" :key="imgIndex">
                    <template v-if="isImage(imgItem.attachName)">
                      <el-image :src="imgItem.fileUrl" :preview-src-list="[imgItem.fileUrl]" class="mr-2" style="width:120px; height: auto">
                        <div slot="error" class="font-size-sm text-center text-muted bg-light" />
                      </el-image>
                    </template>
                    <template v-else>
                      <el-link type="primary" @click="handleDownLoad(imgItem.fileUrl)">{{ imgItem.attachName }}</el-link>
                    </template>
                  </div>
                </template>
                <template v-if="its.type === 'image'&&Array.isArray(its.value)&&its.value.length === 0">/ </template>
                <!-- 文件展示 -->
                <template v-if="its.type === 'arr'&&Array.isArray(its.value)&&its.value.length>0">
                  <el-link type="primary" @click="openAttachPopUp(its.value)">查看</el-link>
                </template>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <el-empty v-if="list.length == 0" description="暂无数据" />
    <el-dialog v-if="dialogHistory" :title="title" :visible.sync="dialogHistory" :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" width="40%">
      <v-form-render v-if="dialogHistory" ref="historyForm" :form-json="formJson2" :form-data="formData" :option-data="optionData" />
      <div style="text-align: center">
        <el-button type="info" size="small" @click="dialogHistory = false">关闭</el-button>
      </div>
    </el-dialog>
    <attachPopUp ref="attachPopUp" file-url-key="fileUrl" file-name-key="attachName" />
  </div>
</template>

<script>
import { getHistoryProcessData, getHistoryAqProcessData, getHistoryXfProcessData, getHistoryHbProcessData } from '@/api/activiti'
import commonList from '@/assets/mixin/commonList'
import AttachPopUp from '@/components/globals/attachPopUp.vue'
export default {
  components: { AttachPopUp },
  mixins: [commonList],
  props: {
    alarmId: {
      type: [Number, String],
      default: 0
    },
    type: {
      type: String,
      default: '能源'
    },
    alarmType: {
      type: [Number, String],
      default: ''
    },
    list: {
      type: Array,
      default: () => [
        {
          name_: '报警预警',
          title: '西南监控中心',
          end_time_: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '报警时间：2023-03-10 13:45\n报警参数：总氮\n报警值：75.04\n报警名称：污染因子（二类污染物）监测值超过排放许可值'
        },
        {
          name_: '下发督办',
          title: '四川建安工业有限责任公司',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '下发时间：2023-03-10 14:45\n处置时间：2023-03-11 12:00前\n处置要求：河北长安车间废水总排口于2023-03-10 13:45发生总氮报警，报警值为75.04，报警名称为污染因子（二类污染物）监测值超过排放许可值，请企业及时核查原因并进行反馈。'
        },
        {
          name_: '企业反馈',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '反馈时间：2023-03-11 09:22\n报警类型：采样点存在杂质\n报警备注：经核查，2023-03-10 13:45发生于河北长安车间废水总排口的总氮报警，报警原因为采样点存在杂志，导致采样设备采集到污泥。\n图片视频：'
        },
        {
          name_: '处置超时',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '超时报警时间：2023-03-11 12:00'
        },
        {
          name_: '处置信息',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '完成处置时间：2023-03-11 09:22\n处置结果：\n处置方式：\n处置预案：《河北长安关于废水在线监测超标的处置预案》.doc'
        },
        {
          name_: '解除报警',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '解除时间：2023-03-11 10:15\n审批意见：'
        },
        {
          name_: '报送集团',
          title: '西南监控中心',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '报送时间：2023-03-11 10:16'
        },
        {
          name_: '处置质疑',
          title: '集团公司',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '质疑时间：2023-03-12 09:34\n反馈时间：2023-03-12 12:00前'
        },
        {
          name_: '企业反馈',
          title: '报警企业',
          times: '2023-03-10 13:45',
          activeNames: ['1'],
          msg: '反馈时间：2023-03-11 09:22\n反馈要求：请企业重新进行处置并进行反馈。\n反馈内容：'
        }
      ]
    }
  },
  data() {
    return {
      dialogHistory: false,
      formJson2: {},
      formData: {},
      optionData: {},
      title: '',
      listData: [],
      treeList: [
        {
          operateName: '提交隐患信息',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'companyName', label: '企业名称：', value: '', type: 'text' },
            { name: 'checkSource', label: '隐患来源：', value: '', type: 'text' },
            { name: 'operatePerson', label: '提交人：', value: '', type: 'text' },
            { name: 'deadline', label: '整改期限：', value: '', type: 'text' }
          ]
        },
        {
          operateName: '审核隐患信息',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'auditResult', label: '审核结果：', value: '', type: 'text' },
            { name: 'auditOpinion', label: '审核意见：', value: '', type: 'text' },
            { name: 'auditPerson', label: '审核人：', value: '', type: 'text' }
          ]
        },
        // {
        //   operateName: '提交整改方案',
        //   operateTime: '',
        //   operateType: '',
        //   activeNames: ['1'],
        //   list: [
        //     { name: 'dangersOption', label: '整改方案：', value: {}, type: 'arr' },
        //     { name: 'deadline', label: '整改期限：', value: '', type: 'text' },
        //     { name: 'head', label: '整改负责人：', value: '', type: 'text' },
        //     { name: 'operatePerson', label: '提交人：', value: '', type: 'text' }
        //   ]
        // },
        {
          operateName: '下发提醒',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'sendReminder', label: '提醒内容：', value: '', type: 'text' },
            { name: 'operatePerson', label: '下发人：', value: '', type: 'text' }
          ]
        },
        {
          operateName: '企业反馈',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'operateContent', label: '反馈内容：', value: '', type: 'text' },
            { name: 'feedbackFile', label: '反馈材料：', value: '', type: 'text' },
            { name: 'operatePerson', label: '反馈人：', value: '', type: 'text' }
          ]
        },
        // {
        //   operateName: '反馈整改情况',
        //   operateTime: '',
        //   operateType: '',
        //   activeNames: ['1'],
        //   list: [
        //     { name: 'operateResult', label: '整改状态：', value: '', type: 'text' },
        //     { name: 'operateContent', label: '整改描述：', value: '', type: 'text' },
        //     { name: 'dangersPicture', label: '整改图片：', value: [], type: 'image' },
        //     { name: 'completeTime', label: '整改完成时间：', value: '', type: 'text' },
        //     { name: 'operatePerson', label: '提交人：', value: '', type: 'text' }
        //   ]
        // },
        {
          operateName: '隐患整改信息',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'operateResult', label: '整改状态：', value: '', type: 'text' },
            { name: 'completeTime', label: '整改时间：', value: '', type: 'text' },
            { name: 'operateContent', label: '整改描述：', value: '', type: 'text' },
            { name: 'head', label: '整改负责人：', value: '', type: 'text' },
            // { name: 'dangersPicture', label: '整改图片：', value: '', type: 'image' },
            { name: 'dangersOption', label: '支撑材料：', value: '', type: 'arr' },
            { name: 'operatePerson', label: '提交人：', value: '', type: 'text' }
          ]
        },
        {
          operateName: '确认隐患整改',
          operateTime: '',
          operateType: '',
          activeNames: ['1'],
          list: [
            { name: 'confirmPerson', label: '确认人：', value: '', type: 'text' }
          ]
        }
      ]
    }
  },
  watch: {
    list: {
      handler(newVal) {
        // this.initTimeLine()
        this.formattingData()
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    // this.initTimeLine()
    this.formattingData()
  },
  methods: {
    initTimeLine() {
      const tagItemArr = []
      if (this.$refs.customTimeline) {
        const tagItems = this.$refs.customTimeline.getElementsByClassName('leftWarp')
        Array.prototype.slice.call(tagItems).forEach((item) => {
          tagItemArr.push(item.clientWidth)
        })
        Array.prototype.slice.call(tagItems).forEach((item) => {
          item.style.width = Math.max(...tagItemArr) + 'px'
        })
      }
    },
    formattingData() {
      this.listData = []
      this.list.forEach(z => {
        this.treeList.forEach(x => {
          const xClone = JSON.parse(JSON.stringify(x))
          if (xClone.operateName === z.operateName) {
            xClone.operateTime = z.operateTime
            xClone.operateType = z.operateType
            xClone.list.forEach(p => {
              p.value = z[p.name]
            })
            this.listData.push(xClone)
          }
        })
      })
    },
    isImage(filename) {
      const imageExtensions = /\.(jpg|jpeg|png|gif|bmp)$/i // 定义常见的图片格式后缀
      return imageExtensions.test(filename) // 返回true或false
    },
    // 查看历史记录
    async getHistoryProcessData(type, row) {
      console.log(type, row)
      this.title = row.name_
      const api = {
        能源: getHistoryProcessData,
        安全: getHistoryAqProcessData,
        消防: getHistoryXfProcessData,
        环保: getHistoryHbProcessData
      }
      const { status, obj } = await api[type]({
        inst_task_id: row.inst_task_id,
        AlarmId: this.alarmId,
        AlarmType: this.alarmType
      })
      if (status === 0) {
        this.dialogHistory = true
        this.formJson2 = obj
        const fileData = {
          fileId_list: obj.fileId_list
        }
        const imgData = {
          imgId_list: obj.imgId_list
        }
        this.$nextTick(() => {
          this.$refs['historyForm'].setFormData(fileData)
          this.$refs['historyForm'].setFormData(imgData)
        })
      }
    }
  }
}
</script>

<style lang="scss">
.custom-timeline {
  .custom-timeline-item {
    display: flex;
    overflow: hidden;
    .leftWarp {
      min-width: 180px;
      height: auto;
      flex-shrink: 0;
      border-radius: 0;
      font-weight: bold;
      text-align: right;
      .big {
        display: inline-block;
        width: 180px;
        background: #eff1f4;
        border-radius: 50px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .small {
        text-align: right;
        padding: 10px 25px;
        white-space: nowrap;
        color: #999999;
      }
    }
    .line-dot {
      width: 50px;
      flex-shrink: 0;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 2px;
        background: #0084ff;
        z-index: 8;
      }
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        top: 9px;
        border-radius: 50px;
        border: 3px solid #0084ff;
        background: #fff;
        z-index: 9;
      }
    }
    .rightWarp {
      flex: 1;
      .el-collapse {
        border: none;
        margin-bottom: 20px;
        .el-collapse-item {
          .el-collapse-item__header,
          .el-collapse-item__wrap {
            border-bottom: none;
            border-top: none;
          }
          .el-collapse-item__header {
            height: 40px;
            line-height: 40px;
            transition: none;
            padding: 0 15px;
            padding-left: 0;
            color: #333;
            font-size: 15px;
          }
        }
        .el-collapse-item {
          margin-bottom: 0 !important;
        }
        .el-collapse-item__content {
          padding-bottom: 0;
          padding: 15px 15px;
          background: #f3f4f7;
          border-radius: 5px;
        }
        .el-descriptions__body {
          background: #f3f4f7;
          color: #0a1c35;
        }
        .right-item {
          display: flex;
          justify-content: left;
          .right-item-cont {
            flex: 1;
            word-break: break-all;
          }
        }
      }
    }
  }
  .custom-timeline-item:first-child {
    .line-dot {
      &::before {
        top: 9px;
      }
    }
  }
  .custom-timeline-item:last-child {
    .el-collapse {
      margin-bottom: 0;
    }
    .line-dot {
      &::before {
        height: 30px;
      }
    }
  }
}
</style>
